<template>
	<view class="detailsBox">
		<product/>
		<view class="detailsCon">
			<view class="slItem">
				<view class="label">兑换方式</view>
				<view class="con">
					<hpy-form-select class="mypicker" :dataList="hobbyList" text="text" name="id" v-model="dispatchMethod" hideBorder @change="change"/>
				</view>
			</view>
			<view class="slItem" v-if="dispatchMethod==1">
				<view class="label">邮寄地址</view>
				<view class="con" @click="goPage">
					<view class="txtshow" v-if="showFlag">
						<text v-if="buyInfo.addressInfo">{{buyInfo.addressInfo.province}}{{buyInfo.addressInfo.city}}{{buyInfo.addressInfo.county}}{{buyInfo.addressInfo.address}}</text>
						<text v-else>请选择</text>
						<image class="img" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a17.png" mode="widthFix"></image>
					</view>
					<!-- <hpy-form-select class="mypicker" :dataList="hobbyList2" text="text" name="id" v-model="bbb2" hideBorder @change="change"/> -->
				</view>
			</view>
		</view>
		<view class="btn5" @click="pay">确认兑换</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import {integralPay} from '@/api/index.js'
	import product from "../components/product.vue"
	import user from "@/common/user.js"
	export default {
		components:{
			product
		},
		computed:{
		    ...mapGetters({
		        details:'base/details',
				buyInfo:'base/buyInfo'
		    })
		},
		onShow(){
			console.log("confirm---buyInfo:",this.buyInfo)
			this.showFlag = true
		},
		data() {
			return {
				dispatchMethod:1,
				hobbyList:[
					{id:1,text:'邮寄快递'},
					{id:2,text:'当面兑换'},
				],
				showFlag:false
				// bbb2:'',
				// hobbyList2:[
				// 	{id:1,text:'三峡广场'},
				// 	{id:2,text:'大坪英利国际'},
				// 	{id:3,text:'观音桥步行街'},
				// 	{id:4,text:'杨家坪龙湖天街'},
				// 	{id:5,text:'巴国城'},
				// ]
			}
		},
		mounted() {
			
		},
		methods: {
			change(){
				console.log("hobbySelect:",this.payMethod)
			},
			goPage(){
				this.showFlag = false
				uni.navigateTo({
					url:'/pages/integral/mall/address/address'
				})
			},
			async pay(){
				if(this.dispatchMethod==1 && !this.buyInfo.addressInfo){
					return this.toast('请选择收货地址')
				}
				const res = await integralPay({
					dispatchMethod: this.dispatchMethod,
					mallCommodityId: this.details.id,
					payMethod: "integral",
					purchaseCount: this.buyInfo.quantity,
					userAddressId:this.dispatchMethod==1?this.buyInfo.addressInfo.id:'',
					userId: user.getUserId()
				})
				if(res.orderNo){
					this.showModal('兑换成功','/pages/integral/mall/mall')
				}else{
					this.showModal(res.errorMessage)
				}
				
			},
			showModal(content,url){
				uni.showModal({
					title: '提示',
					content,
					showCancel:false,
					success(ret) {
						if (ret.confirm && url) {
							uni.switchTab({url})
						}
					}
				})
			},
			toast(title){
				uni.showToast({
					title,
					icon:'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss">
	.detailsBox{
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.detailsCon{
			box-sizing: border-box;
			margin: 20rpx 0 0 0;
			width: 100%;
			border-radius: 20rpx;
			background: #fff;
			overflow: hidden;
			padding: 20rpx;
			.slItem{
				display: flex;
				height: 90rpx;
				
				&+.slItem{
					border-top: 1px solid #eee;
				}
				.label{
					width: 200rpx;
					line-height: 90rpx;
				}
				.con{
					flex: 1;
					.txtshow{
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 100%;
						height: 100%;
						padding: 0 20rpx 0 0;
						.img{
							width: 12rpx;
							margin: 0 0 0 15rpx;
							-webkit-transform: rotate(90deg);
							transform: rotate(90deg);
						}
					}
				}
			}
		}
	}
	.mypicker{
		float: right;
		height: 100%;
		.select-picker{
			line-height: 90rpx!important;
			.select-picker-arrow-area{
				margin-top: -10rpx;
				opacity: 0.5;
			}
		}
	}
</style>

